import React, { useState, useEffect } from 'react';
import { Button, Form, Input, InputNumber, Card, Upload, Image, message } from 'antd';
import { UploadOutlined } from '@ant-design/icons'
import { studAdd, fetchStudy } from '@a/nowPage'
import { useNavigate } from 'react-router-dom'
const StudyAdd = () => {
  const navigate = useNavigate();
  // 图片上传状态改变事件
  const [thumb, setThumb] = useState('');
  const uploadStatusChange = (info) => {
    if (info.file.status === 'done') {
      setThumb(info.file.response.data.url)
    }
  }
  // 提交表单新增学员信息
  const onsubmitStudyForm = (params) => {
    params.thumb = thumb;
    studAdd(params).then(res => {
      if (res.data.code === 200) {
        message.success(res.data.msg, 2, () => {
          // 去在学学员页
          navigate('/nowPage', { replace: true })
        })
      }
    })
  };



  // 
  const [students, setStudents] = useState([]);
  const getStudy = () => {
    fetchStudy().then(res => {
      if (res.data.code === 200) {
        const students = res.data.data.lists;
        // console.log(res);
        setStudents([
          ...students.map(study => {
            return {
              label: study.studyName,
              value: study.id
            }
          })
        ])
      }
    })
  }

  useEffect(() => {
    getStudy();
  }, [])
  return (
    <Card title="新增学员" style={{ maxWidth: 900 }}>
      <Form
        name="basic"
        labelCol={{
          span: 4,
        }}
        wrapperCol={{
          span: 20,
        }}
        onFinish={onsubmitStudyForm}
      >
        <Form.Item
          label="学生姓名"
          name="studyName"
          rules={[
            {
              required: true,
              message: '学生姓名必须输入!',
            },
          ]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="年龄"
          name="age"
          rules={[
            {
              required: true,
              message: '年龄必须输入!',
            },
          ]}
        >
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item
          label="家长姓名"
          name="parentName"
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="费用"
          name="Price"
        >
          <InputNumber min={0} />
        </Form.Item>
        <Form.Item
          label="描述"
          name="desc"

        >
          <Input.TextArea />
        </Form.Item>
        <Form.Item
          label="学生头像"

        >
          <Upload
            accept='image/*'
            action="/api/upload"
            onChange={uploadStatusChange}
          >
            <Button icon={<UploadOutlined />}>点击上传</Button>
          </Upload>
          <Image src={thumb} width={80}></Image>
        </Form.Item>

        <Form.Item
          wrapperCol={{
            offset: 8,
            span: 16,
          }}
        >
          <Button type="primary" htmlType="submit">
            确定
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
};
export default StudyAdd;
